<!-- 模板 -->
<template>
  <div class="waitFinish">
     <el-card shadow="hover">
      <div>
        <i class="el-icon-search" />
        <span>筛选搜索</span>
        <el-button
          style="margin-left: 20px;"
          type="primary"
          size="small"
          icon="el-icon-search"
          @click="search"
        >
          搜索
        </el-button>
        <!-- <el-button icon="el-icon-refresh" size="small" @click="resetParams">
          重置
        </el-button> -->
      </div>
      <div style="margin-top: 15px">
        <el-form
          :inline="true"
          :model="params"
          size="small"
          label-width="140px"
        >
          <el-form-item label="姓名:" >
            <el-input
              v-model="params.realName"
              placeholder="输入姓名"
              clearable
              @clear="search"
            />
          </el-form-item>
           <el-form-item label="身份证号:" >
            <el-input
              v-model="params.identityCard"
              placeholder="输入身份证号"
              clearable
              @clear="search"
            />
          </el-form-item>
          <el-form-item label="手机号:" >
            <el-input
              v-model="params.phone"
              placeholder="输入手机号"
              clearable
              @clear="search"
            />
          </el-form-item>
          <!-- <el-form-item label="缴费状态：">
            <el-select v-model="params.state" placeholder="请选择缴费状态" clearable @change="search">
              <el-option
                v-for="item in stateOptions"
                :key="item.id"
                :label="item.label"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item> -->
        </el-form>
      </div>
    </el-card>

<div style="margin-bottom:10px"></div>
   <el-card shadow="hover">
         <span>待完成报名列表</span>
         <div style="margin-top:10px">
           <el-select v-model="params1.name" placeholder="请选择分类"  filterable @change="search1">
                  <el-option
                  v-for="item in classOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                  </el-option>
              </el-select> 
         </div>
          
        <el-table
          style="margin-top:20px"
          v-loading="loading"
          :data="tableData"
          border
          class="table"
          ref="multipleTable"
          header-cell-class-name="table-header"
        >
          <el-table-column type="index" label="编号" align="center" />
            <el-table-column
            label="头像"
            min-width="150"
            align="center"
          >
            <template slot-scope="scope">
              <img :src="showUrl+scope.row.url" alt="" width="80" height="80">
            </template>
          </el-table-column>
          <el-table-column
            prop="realName"
            label="姓名"
            align="center"
            min-width="150"
            :show-overflow-tooltip="true"
          ></el-table-column>
           <el-table-column
            prop="identityCard"
            label="身份证号"
            align="center"
            min-width="150"
            :show-overflow-tooltip="true"
          ></el-table-column>
           <el-table-column
            prop="phone"
            label="手机号"
            align="center"
            min-width="150"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <template v-for="(item, index) in tableHead">
            <el-table-column align="center" :label="item.name" :key="index" :show-overflow-tooltip="true" min-width="130">
              <template slot-scope="scope">
                {{ scope.row[item.mesName]}}
              </template>
            </el-table-column>
          </template>
          <!-- <el-table-column
          prop="realName"
          label="姓名"
          align="center"
          min-width="150"
          :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <el-link   @click="bianji(scope.row)">{{scope.row.realName}}</el-link>
            </template>
          </el-table-column>
          <el-table-column
            label="头像"
            min-width="150"
            align="center"
          >
            <template slot-scope="scope">
              <img :src="showUrl+scope.row.headPortrait" alt="" width="80" height="80">
            </template>
          </el-table-column>
          <el-table-column
            label="二维码"
            min-width="150"
            align="center"
          >
            <template slot-scope="scope">
              <img :src="scope.row.qrCode" alt="" width="80" height="80">
            </template>
          </el-table-column>
           <el-table-column
            prop="identityCard"
            label="身份证号"
            align="center"
            min-width="150"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="createTime"
            label="报名时间"
            align="center"
            min-width="150" 
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="phone"
            label="手机号"
            align="center"
            min-width="150"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="certificateName"
            label="报名项目"
            align="center"
            min-width="150"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="education"
            label="学历"
            align="center"
            min-width="150"
            :show-overflow-tooltip="true"
          ></el-table-column>
           <el-table-column
            prop="location"
            label="常驻地"
            align="center"
            min-width="150"
            :show-overflow-tooltip="true"
          ></el-table-column>
           <el-table-column
            prop="title"
            label="职称"
            align="center"
            min-width="150"
            :show-overflow-tooltip="true"
          ></el-table-column>
           <el-table-column
            prop="companyName"
            label="供职单位名称"
            align="center"
            min-width="150"
            :show-overflow-tooltip="true"
          ></el-table-column>
           <el-table-column
            prop="duties"
            label="职务"
            align="center"
            min-width="150"
            :show-overflow-tooltip="true"
          ></el-table-column>
           <el-table-column
            prop="payMoney"
            label="价格"
            align="center"
            min-width="150"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column label="状态" align="center" min-width="150">
            {{status}}
          </el-table-column> -->
          <el-table-column
            prop="payMoney"
            label="金额"
            align="center"
            min-width="150"
          ></el-table-column>
          <el-table-column
            prop="payTime"
            label="支付时间"
            align="center"
            min-width="150"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column label="支付方式" align="center" min-width="150">
            <template slot-scope="scope">
              <span>
                {{ scope.row.payment == 3?"代缴":scope.row.payment == 2?"支付宝":scope.row.payment == 1?'微信':scope.row.payment == 4?'对公转账':'' }}
              </span>
            </template>
          </el-table-column>
          <!-- <el-table-column
            prop="certificationDate"
            label="报名时间"
            align="center"
            min-width="150"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="payTime"
            label="支付时间"
            align="center"
            min-width="150"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="invoiceRemark"
            label="备注"
            align="center"
            min-width="280"
             :show-overflow-tooltip="true"
          ></el-table-column> -->
          <!-- <el-table-column label="是否需要发票" align="center" min-width="150">
            <template slot-scope="scope">
              <span>{{ scope.row.invoiceStatus == 0?"不需要":scope.row.invoiceStatus == 1?"需要":'' }}</span>
            </template>
          </el-table-column>
           <el-table-column
            prop="name"
            label="公司名称"
            align="center"
            min-width="150"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="invoiceAmount"
            label="订单金额"
            align="center"
            min-width="150" 
          ></el-table-column> -->
          <!-- <el-table-column
            prop="dutyParagraph"
            label="税号"
            align="center"
            min-width="150"
             :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop=" invoiceAddress"
            label="邮寄地址"
            align="center"
            min-width="150"
             :show-overflow-tooltip="true"
          ></el-table-column> -->
          <el-table-column
            label="操作"
            min-width="250"
            align="center"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                icon="el-icon-success"
                @click="handleComplete(scope.row)"
                >完成</el-button
              >
              <el-button
                type="text"
                icon="el-icon-edit"
                @click="update(scope.row)"
                >编辑</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <div class="pagination">
        <pagination
          v-show="pageTotal > 0"
          :total="pageTotal"
          :page.sync="params.pageNum"
          :limit.sync="params.pageSize"
          @pagination="getData00"
        />
      </div>
    <!-- <el-dialog :title=title :visible.sync="open1" width="55%">
      <el-form ref="form" :model="form" label-width="120px" :rules="rules">
        <el-row :gutter="20">
            <el-col :span="12">
          <el-form-item label="头像" prop="headPortrait">
            <el-upload
              :headers="headers"
              :action="`${baseUrl}/goods/goods/upload`"
              :show-file-list="false"
              :on-success="uploadPicUrl"
              class="avatar-uploader"
            >
              <img v-if="form.headPortrait" :src="showUrl + form.headPortrait" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          </el-col>
        <el-col :span="12">
        </el-col>
      </el-row>
         <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="姓名" prop="realName">
                <el-input v-model="form.realName"></el-input>
              </el-form-item>
            </el-col>
        <el-col :span="12">
              <el-form-item label="身份证号" prop="identityCard">
                <el-input v-model="form.identityCard"></el-input>
              </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="手机号" prop="phone">
                <el-input v-model="form.phone"></el-input>
              </el-form-item>
            </el-col>
        <el-col :span="12">
              <el-form-item label="报名项目" prop="certificateName" v-if="showOpen">
                  <el-select v-model="form.certificateName"   @change="changeName" placeholder="请选择报名项目" style="width:100%" multiple>
                        <el-option
                        v-for="item in options"
                        :key="item.dictCode"
                        :label="item.dictLabel"
                        :value="item.dictLabel">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="报名项目"  prop="certificateName" v-else>
                <el-input v-model="form.certificateName"></el-input>
              </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="学历" prop="education">
                <el-input v-model="form.education"></el-input>
              </el-form-item>
            </el-col>
        <el-col :span="12">
              <el-form-item label="常驻地" prop="location">
                <el-input v-model="form.location" ></el-input>
              </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="职称" prop="title">
                <el-input v-model="form.title" ></el-input>
              </el-form-item>
             </el-col>
        <el-col :span="12">
              <el-form-item label="供职单位名称" prop="companyName">
                <el-input v-model="form.companyName" ></el-input>
              </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="职务" prop="duties">
                <el-input v-model="form.duties" ></el-input>
              </el-form-item>
            </el-col>
        <el-col :span="12">
              <el-form-item label="价格/元" prop="payMoney">
                <el-input v-model="form.payMoney" ></el-input>
              </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="状态">
                <el-input v-model="status" ></el-input>
              </el-form-item>
            </el-col>
        <el-col :span="12">
              <el-form-item label="金额" >
                <el-input-number disabled v-model="form.payMoney"></el-input-number>
              </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="支付方式"  prop="payment">
                <el-input v-model="form.payment" ></el-input>
              </el-form-item>
            </el-col>
        <el-col :span="12">
              <el-form-item label="支付订单号" prop="orderSn">
                <el-input v-model="form.orderSn"></el-input>
              </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="发证日期" prop="certificationDate">
                <el-date-picker
                  v-model="form.certificationDate"
                  type="date"
                  value-format="yyyy-MM-dd hh:mm:ss"
                  placeholder="选择日期">
                  </el-date-picker>
              </el-form-item>
            </el-col>
        <el-col :span="12">
              <el-form-item label="支付时间" prop="payTime">
                <el-date-picker
                  v-model="form.payTime"
                  type="date"
                  value-format="yyyy-MM-dd hh:mm:ss"
                  placeholder="选择日期">
                  </el-date-picker>
              </el-form-item>
            </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer" v-if="showBtn">
        <el-button @click="openqx">取 消</el-button>
        <el-button type="primary" @click="okopen">确 定</el-button>
      </span>
    </el-dialog> -->
<!-- 编辑弹窗 -->
    <el-dialog :title=title :visible.sync="open" width="45%">
      <el-form ref="form" :model="form" label-width="120px" :rules="rules">
           <el-form-item label="头像" prop="url">
          <el-upload
            :headers="headers"
            :action="`${baseUrl}/goods/goods/upload`"
            :show-file-list="false"
            :on-success="uploadPicUrl"
            class="avatar-uploader"
          >
            <img v-if="form.url" :src="showUrl + form.url" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="姓名" prop="realName">
                <el-input v-model="form.realName"></el-input>
              </el-form-item>
            </el-col>
        <el-col :span="12">
              <el-form-item label="身份证号" prop="identityCard">
                <el-input v-model="form.identityCard"></el-input>
              </el-form-item>
            </el-col>
        </el-row>
         <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="手机号" prop="phone">
                <el-input v-model="form.phone"></el-input>
              </el-form-item>
            </el-col>
        <el-col :span="12">
              <el-form-item label="选择类型" >
              <el-select v-model="form.type" placeholder="请选择分类"  filterable @change="handleClass" style="width:230px">
                      <el-option
                      v-for="(item,index) in classOptions1"
                      :key="index"
                      :label="item.name"
                      :value="item.id">
                      </el-option>
                  </el-select> 
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-form-item label="选择类型" >
          <el-select v-model="form.type" placeholder="请选择分类"  filterable @change="handleClass" style="width:230px">
                  <el-option
                  v-for="item in classOptions1"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                  </el-option>
              </el-select> 
        </el-form-item> -->
        <div v-for="(item, index) in bjForm" :key="index">
              <el-form-item :label="item.name" v-show="item.inputType == '输入框'" >
                  <el-input v-model="form[item.mesName]" :placeholder=placTitle+item.name clearable style="width:230px"></el-input>
              </el-form-item>
                

                  <el-form-item :label="item.name" v-show="item.inputType == '日期'">
                     <el-date-picker v-model="form[item.mesName]"  value-format="yyyy-MM-dd " type="date" placeholder="选择日期" ></el-date-picker>
                  </el-form-item>

               <el-form-item :label="item.name" v-show="item.inputType == '多选'">
                  <el-checkbox-group v-model="form[item.mesName]">
                    <el-checkbox :label="item1.optiones" v-for="(item1,index1) in item.optionList" :key="index1">{{item1.optiones}}</el-checkbox>
                  </el-checkbox-group>
               </el-form-item>

               <el-form-item :label="item.name" v-show="item.inputType == '单选'" >
                  <el-radio v-model="form[item.mesName]" :label="item2.optiones" v-for="(item2,index2) in item.optionList" :key="index2">{{item2.optiones}}</el-radio>
               </el-form-item>

               <el-form-item :label="item.name" v-show="item.inputType == '字典表'"  >
                    <el-select v-model="form[item.mesName]" :placeholder=placTitle1+item.name style="width: 55%;"  multiple   @change="((val)=>{changeName(val,item)})">
                        <el-option
                          v-for="item2 in item.sysDictData" 
                          :key="item2.dictLabel"
                          :label="item2.dictLabel" 
                          :value="item2.dictLabel">
                        </el-option>
                    </el-select> 
                </el-form-item>
        </div>
        <el-form-item label="金额" >
                  <el-input-number v-model="form.payMoney" disabled></el-input-number>
        </el-form-item>
        <el-form-item label="发证日期" prop="certificationDate">
                <el-date-picker
                  v-model="form.certificationDate"
                  type="date"
                  value-format="yyyy-MM-dd "
                  placeholder="选择日期">
                  </el-date-picker>
              </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer" v-if="showBtn">
        <el-button @click="openqx">取 消</el-button>
        <el-button type="primary" @click="okopen">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
        title="模板生成"
        :visible.sync="tempVis"
        width="65%">
        <div style="text-align:center"  class="preview" ref="previewImg">
          <img style="width:1000px;" src="@/assets/images/temol.jpg" alt=""  />
          <!-- orderSn -->
          <div class="watermarkc">
            <!-- <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="50px"> -->
              <img style="width:121px;height:158px" :src="'https://9001rzsxy.oss-cn-beijing.aliyuncs.com'+ tempForm.url" alt="" srcset="">
            <!-- </svg> -->
          </div>
          <div class="watermarkb">
            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="50px">
              <text x="50%" y="50%"
                  alignment-baseline="middle"
                  text-anchor="middle"
                  font-weight="600"
                  font-color="#323232"
                  font-size="20"
                  font-family="microsoft yahe"
                  >
                  {{tempForm.orderSn}}
              </text>
            </svg>
          </div>
          <div class="watermark">
            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="50px" preserveAspectRatio="xMinYMin">
              <text x="50%" y="51%"
                  alignment-baseline="start"
                  text-anchor="start"
                  font-weight="600"
                  font-color="#323232"
                  font-size="20"
                  font-family="microsoft yahe"
                  >
                  <tspan x="206" y="30" font-size="20" >{{tempForm.realName}}</tspan>
                  
              </text>
            </svg>
          </div>
          <!-- id -->
          <div class="watermarka">
            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="50px">
              <text x="50%" y="52%"
                  alignment-baseline="middle"
                  text-anchor="middle"
                  font-weight="600"
                  font-color="#323232"
                  font-size="20"
                  font-family="microsoft yahe"
                  >
                  {{tempForm.identityCard}}
              </text>
            </svg>
          </div>
          <!-- 证书 -->
          <div class="watermarkd">
            <!-- <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="50px"> -->
              <h3 x="50%" y="50%"
                  v-for="(item , index) in tempForm.certificate"
                  :key="index"
                  style="
                  font-weight:600;
                  font-size:20;
                  font-family:microsoft yahe;
                  color:#323232
                  "
                  >
                  {{item}}
              </h3>
            <!-- </svg> -->
          </div>
          <!-- 年月日 -->
          <div class="watermarke">
            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="50px">
              <text x="50%" y="49%"
                  style="display:block"
                  alignment-baseline="middle"
                  text-anchor="middle"
                  font-weight="600"
                  font-color="#323232"
                  font-size="20"
                  font-family="microsoft yahe"
                  >
                  {{tempForm.year}}年
              </text>
            </svg>
          </div>
          <!-- 年月日 -->
          <div class="watermarkf">
            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="50px">
              <text x="50%" y="49%"
                  style="display:block"
                  alignment-baseline="middle"
                  text-anchor="middle"
                  font-weight="600"
                  font-size="20"
                  font-color="#323232"
                  font-family="microsoft yahe"
                  >
                  {{tempForm.month}}月
              </text>
            </svg>
          </div>
          <!-- 年月日 -->
          <div class="watermarkg">
            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="50px">
              <text x="50%" y="49%"
                  style="display:block"
                  alignment-baseline="middle"
                  text-anchor="middle"
                  font-weight="600"
                  font-color="#323232"
                  font-size="20"
                  font-family="microsoft yahe"
                  >
                  {{tempForm.day}}日
              </text>
            </svg>
          </div>
          <!-- 二维码 -->
          <div class="watermarkh">
            <img style="width:80px;height:80px" :src="tempForm.qrCode" alt="" srcset="">
          </div>
        </div>
        
        <span slot="footer" class="dialog-footer">
          <el-button size="mini" @click="tempVis = false">取 消</el-button>
          <el-button size="mini" type="primary" @click="tempSure">确 定</el-button>
        </span>
      </el-dialog>
  </div>
</template>

<script>
import {queryorder_school,nijisiai1,upload,nijisiai2,getRegistration,getClassList1,getQueryName,getRegistrationXq,getUp} from "@/api/order/orderschool";
import { getToken } from "@/utils/auth";
import DomToImage from "dom-to-image";

import { certificate__List } from "@/api/certificate/certificateAds";

export default {
  name: '',
  data () {
    return {
      headers: { Authorization: "Bearer " + getToken() },
      baseUrl: process.env.VUE_APP_BASE_API,
      tableData:[],
      options:[],//报名项目
      options2:[],
      params:{
        pageNum: 1,
        pageSize: 10,
        examineStatus:3,
        state:2,
        type:undefined,
      },
      params1: {
        pageNum: 1,
        pageSize: 10,
        state:2,
        name:'',
      },
      pageTotal: 0,
      form:{
        url: "",
        orderSource:"",
        examineStatus:"",
        qrCode:'',
        certificationDate:'',
          mes1:[],
        mes2:[],
        mes3:[],
        mes4:[],
        mes5:[],
        mes6:[],
        mes7:[],
        mes8:[],
        mes9:[],
        mes10:[],
        mes11:[],
        mes12:[],
        mes13:[],
        mes14:[],
        mes15:[],
        mes16:[],
        mes17:[],
        mes18:[],
        mes19:[],
        mes20:[],
      },
      open:false, //弹窗
      loading:true,
      showOpen:true,
      showBtn:true,
      status:"已支付",
      title:"",
      stateOptions: [
        {
          id: 2,
          label: "已缴费"
        },
        {
          id: 3,
          label: "未缴费"
        }
      ],
      options1:[
      {id:1,value:"微信"},
      {id:2,value:"支付宝"},
      {id:3,value:"代缴"},
      ],//支付方式
      rules:{},
      tempVis:false,
      tempForm:{
        text: "",
        fontSize: 18,
        width: 6,
        color: "#000000",
        alpha: 35,
        rotate: 35,
        qrCode:'',
        certificate:[],
    },
    imgData:{
        certificatePic:'',
        id:'',
        examineStatus:'',
        state:3,
      },
      placTitle:'请输入',
      placTitle1:'请选择',
    certOptions: [],
    classOptions:[],
    classOptions1:[],
      tableHead:[],
      bjForm:[],
      Dname:undefined,
      Dmobile:undefined,
      Dnumber:undefined,
    rules:{
         url: [
            { required: true, message: '请添加头像', trigger: 'blur' },
          ],
          qrCode: [
            { required: true, message: '请添加二维码', trigger: 'blur' },
          ],
           realName: [
            { required: true, message: '请输入姓名', trigger: 'blur' },
          ],
           identityCard: [
            { required: true, message: '请输入身份证', trigger: 'blur' },
            { pattern: /^[1-9]{1}[0-9]{14}$|^[1-9]{1}[0-9]{16}([0-9]|[xX])$/,message: '请输入正确的证件号'},
          ],
          phone: [
            { required: true, message: '请输入手机号', trigger: 'blur' },
            { pattern: /^1[3456789]\d{9}$/,message: '请输入正确的手机号'},
          ],
           certificateName: [
            { required: true, message: '请选择报考项目', trigger: 'blur' },
          ],
            location: [
            { required: true, message: '请选输入常驻地', trigger: 'blur' },
          ],
          education: [
            { required: true, message: '请选输入学历', trigger: 'blur' },
          ],
          certificationDate: [
            { required: true, message: '请选择发证日期', trigger: 'blur' },
          ],
          title: [
            { required: true, message: '请选输入职称', trigger: 'blur' },
          ],
          companyName: [
            { required: true, message: '请选输入供职单位名称', trigger: 'blur' },
          ],
          duties: [
            { required: true, message: '请选输入职务', trigger: 'blur' },
          ],
      },
    }
  },
  props: [],
  components: {},
  computed: {},
  filters: {},
  methods: {
     handleClass(val){
          let that = this
      // console.log(val);
      getQueryName(val).then(res =>{
        if(res.code == 200){
          // console.log(res);
          that.bjForm = res.data
          // that.form.mes13 = ''
           console.log(that.form);
          for (let i = 0; i < that.bjForm .length; i++) {
            if(that.bjForm[i].dictType == 'sys_enter'){
              that.options1 = that.bjForm[i].sysDictData
            }
            if(that.bjForm[i].inputType == '日期'){
              console.log(123);
              that.$nextTick(res =>{
              that.form[that.bjForm[i].mesName] = ''
              })
            }
          }
        }
      })
    },
     uploadPicUrl(res){
        // console.log(res.data)
        this.form.url = res.data
    },
     uploadPicUrl1(res) {
      this.form.qrCode = res.data
    },
    // 修改按钮
    chakan(row){
      this.title= "修改"
      this.showOpen = true
      this.showBtn = true
      this.form = JSON.parse(JSON.stringify(row))
      this.form.certificateName = row.certificateName.split(',')
      if(this.form.payment ==1){
        this.form.payment = "微信"
      }else if(this.form.payment ==2){
        this.form.payment = "支付宝"

      }else if(this.form.payment ==3){
        this.form.payment = "代缴"
      }
      this.open = true
    },
    // 编辑
    update(row){
      this.title = '编辑'
      this.showOpen = true
      this.showBtn = true
      console.log(row);
      this.form = JSON.parse(JSON.stringify(row))
      getQueryName(row.type).then(res => {
        if(res.code == 200){
          this.bjForm = res.data
        }
      })
      getRegistrationXq(row.id).then(res =>{
        if(res.code == 200){
          // console.log(res);
          this.form = res.data
          for (let i = 0; i < res.data.mesList.length; i++) {
            if(res.data.mesList[i].mesType == '字典表' || res.data.mesList[i].mesType == '多选'){
              this.form[res.data.mesList[i].mesName] =  res.data.mesList[i].mesValue.split(',')
              console.log( this.form[res.data.mesList[i].mesName]);
            }
            
          }
        }
      })
      this.open = true
    },
    // 提交按钮
    okopen(){
      // this.form.certificateName = this.form.certificateName.toString()
      // this.form.orderSource = 3
      this.form.examineStatus = 3
      if(this.form.payment == "微信"){
        this.form.payment = 1
      }else if(this.form.payment == "支付宝"){
        this.form.payment = 2

      }else if(this.form.payment == "代缴"){
        this.form.payment = 3
      }
      // console.log(this.form);
      if(this.form.mes1 != null){
                    this.form.mes1 = this.form.mes1.toString()
                  }
                  if(this.form.mes2 != null){
                  this.form.mes2 = this.form.mes2.toString()
                  }
                  if(this.form.mes3 != null){
                    this.form.mes3 = this.form.mes3.toString()
                  }
                  if(this.form.mes4 != null ){
                    this.form.mes4 = this.form.mes4.toString()
                  }
                  if(this.form.mes5 != null){
                    this.form.mes5 = this.form.mes5.toString()
                  }
                  if(this.form.mes6 != null){
                    this.form.mes6 = this.form.mes5.toString()
                  }
                  if(this.form.mes7 != null){
                  this.form.mes7 = this.form.mes7.toString()
                  }
                  if(this.form.mes8 != null ){
                  this.form.mes8 = this.form.mes8.toString()
                  }
                  if(this.form.mes9 !=null){
                  this.form.mes9 = this.form.mes9.toString()
                  }
                  if(this.form.mes10 != null ){
                  this.form.mes10 = this.form.mes10.toString()
                  }
                  if(this.form.mes11 != null ){
                  this.form.mes11 = this.form.mes11.toString()
                  }
                  if(this.form.mes12 != null ){
                  this.form.mes12 = this.form.mes12.toString()
                  }
                  if(this.form.mes13 != null ){
                  this.form.mes13 = this.form.mes13.toString()
                  }
                  if(this.form.mes14 != null ){
                  this.form.mes14 = this.form.mes14.toString()
                  }
                  if(this.form.mes15 != null ){
                  this.form.mes15 = this.form.mes15.toString()
                  }
                  if(this.form.mes14 != null ){
                  this.form.mes16 = this.form.mes16.toString()
                  }
                  if(this.form.mes17 != null ){
                  this.form.mes17 = this.form.mes17.toString()
                  }
                  if(this.form.mes18 != null ){
                  this.form.mes18 = this.form.mes18.toString()
                  }
                  if(this.form.mes19 != null ){
                  this.form.mes19 = this.form.mes19.toString()
                  }
                  if(this.form.mes20 != null ){
                  this.form.mes20 = this.form.mes20.toString()
                  }
      this.$refs["form"].validate(valid => {
        if (this.form.id != undefined) {
                  getUp(this.form).then(res=>{
                      if(res.code == 200){
                          this.$message.success('编辑成功')
                          this.open = false
                          this.getData00()
                      }
                  })
                } else if(valid){
                  nijisiai(this.form).then(res=>{
                      // console.log(res,'。。。。。。。。。')
                      if(res.code == 200){
                          this.$message.success('添加成功')
                          this.open = false
                          this.getData00()
                          
                      }
                  })
                }
      });
    },
     // 弹窗取消按钮
    openqx(){
      this.open = false
      this.getData00()
    },
    // 选择报名项目
    changeName(val){
      if(val.length == 1){
        // console.log(val)
        for (let i = 0; i < this.options.length; i++) {
          if(val == this.options[i].dictLabel){
            this.form.payMoney = this.options[i].dictValue
          }
          
        }
      }else  if(val.length < 1){
        this.form.payMoney = 0
      }else if(val.length == 2){
        this.form.payMoney = this.options2[0].dictValue
      }else if(val.length == 3){
        this.form.payMoney = this.options2[1].dictValue
      }
    },
    tempSure() {
      let node = this.$refs.previewImg;
      let that = this;
      DomToImage.toPng(node)
        .then(function(dataUrl) {
          let i = JSON.parse(JSON.stringify(dataUrl))
          let arr = i.split(",");
          let mime = arr[0].match(/:(.*?);/)[1];
          let suffix = mime.split("/")[1];
          let bstr = atob(arr[1]);
          let n = bstr.length;
          let u8arr = new Uint8Array(n);
          while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
          }
          var fimg = new File([u8arr], `file.${suffix}`, {
            type: mime
          });
          var formData = new FormData();
          formData.append("file", fimg);
          upload(formData).then(res => {
            if(res.code == 200){
              that.imgData.certificatePic =  res.data;
              that.imgData.examineStatus =  4;
              that.imgData.state = 3
              nijisiai2(that.imgData).then(res => {
                if(res.code == 200){
                  that.tempVis = false;
                  that.getData00()
                }
              })
            }
          })
          that.$nextTick(() => {
            that.$message.success("证书模板生成成功");
          });
        })
        .catch(function(error) {
          that.$message.error("下载失败");
        });
    },
    // 完成按钮
    handleComplete(row){
      this.tempForm = JSON.parse(JSON.stringify(row)) 
      console.log(this.tempForm.certificate);
      if(this.tempForm.certificationDate == '' || this.tempForm.certificationDate == null){
        this.$message.error("请先在编辑中填写发证日期");
      }else{
         this.imgData = {
        id:row.id,
        certificatePic:''
      }
      this.tempForm.certificate = this.tempForm.certificateName.split(",")
      this.tempForm.year = this.tempForm.certificationDate.substring(0,4)
      this.tempForm.month = this.tempForm.certificationDate.substring(5,7)
      this.tempForm.day = this.tempForm.certificationDate.substring(8,10)
      this.tempVis = true;
      }
     
    },
    // 查看
    bianji(row){
      this.title = "查看"
      this.showBtn = false
      this.showOpen = false
      this.form= {
          url: "",
          realName:'',
          identityCard:'',
          phone:'',
          certificateName:'',
          payMoney:'',
          education:'',
          location:'',
          title:'',
          companyName:'',
          duties:'',
          payment:'',
      }
      this.form = JSON.parse(JSON.stringify(row))
       if(this.form.payment ==1){
        this.form.payment = "微信"
      }else if(this.form.payment ==2){
        this.form.payment = "支付宝"

      }else if(this.form.payment ==3){
        this.form.payment = "代缴"
      }
      this.open = true
    },
    resetParams() {
      this.params = {
        pageNum: 1,
        pageSize: 10,
        examineStatus:3,
      };
      this.search();
    },
    // 触发搜索按钮
    search() {
      this.$set(this.params, "pageNum", 1);
      this.paramsFlag = 0;
      this.getData00();
      this.getziduan()
    },
    search1(val){
      this.params.type = val
      this.getData00()
      this.getziduan()
      // console.log(val);
    },
    getCertList() {
      certificate__List({
        pageNum: 1,
        pageSize: 10000
      }).then(res => {
        this.certOptions = res.rows;
        console.log(this.certOptions);
      });
    },
     //获取列表
    getData00() {
      // console.log(this.params);
      // queryorder_school(this.params).then(res => {
      //   console.log(res, "待审核证书");
      //   if (res.code == 200) {
      //     this.tableData = res.rows;
      //     this.pageTotal = res.total;
      //     this.loading = false;
      //   }
      // });
      getRegistration(this.params).then(res => {
        // console.log(res, "待审核证书");
        if (res.code == 200) {
        this.tableData = res.rows
          this.pageTotal = res.total;
        if(this.pageTotal == 0){
          this.loading = false;
        }else {
          this.Dname = this.tableData[0].name
          this.Dmobile = this.tableData[0].mobile
          this.Dnumber = this.tableData[0].number
          this.loading = false;
        }
        
          
        }
      });
    },
    getziduan(){
      getQueryName(this.params.type).then(res =>{
        if(res.code == 200){
          // console.log(res);
          this.tableHead = res.data
          console.log(this.tableHead);
        }
      })
    },
     //   获取分类
    getClsss(){
        getClassList1().then(res => {
            // console.log(res);
            this.classOptions = res.data
            this.classOptions1 = res.data
            this.params1.name = res.data[0].name
            this.params.type = res.data[0].id
            this.getData00()
            this.getziduan()
            });
    },
  },
  created () {
    this.getClsss()
    // this.getData00()
    this.getCertList();
    // this.getDicts('sys_enter').then(res=>{
    //     // console.log(res,'报名项目')
    //     this.options = (res.data).splice(0,3)
    //     this.options2 = res.data
    // })
  },
  mounted () {}
}
</script>
<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }
  .avatar {
    width: 120px;
    height: 120px;
    display: block;
  }
</style>
<style scoped>
.waitFinish {
  padding: 20px 30px;
}
</style>
<style lang="scss" scoped>
  .preview {
    position: relative;
    margin-left: 20px;
    max-width: 360px;
    img {
      width: 100%;
      height: 100%;
    }
    .watermarkf{
      position: absolute;
      left: 530px;
      top: 335px;
      width: 100%;
      height: 100%;
    }
    .watermarkg{
      position: absolute;
      left: 593px;
      top: 335px;
      width: 100%;
      height: 100%;
    }
    .watermarke{
      position: absolute;
      left: 461px;
      top: 335px;
      width: 100%;
      height: 100%;
    }
    .watermarkd{
      position: absolute;
      left: 510px;
      top: 143px;
      width: 121%;
      height: 100%;
      text-align: left;
    }
    .watermarka{
      position: absolute;
      left: 105px;
      top: 552px;
      width: 100%;
      height: 100%;
    }
    .watermarkc{
      position: absolute;
      left: 85px;
      top: 262px;
      width: 100%;
      height: 100%;
    }
    .watermarkb{
      position: absolute;
      left: 73px;
      top: 439px;
      width: 100%;
      height: 100%;
    }
    .watermark {
      position: absolute;
      left: -28px;
      top: 495px;
      width: 100%;
      height: 100%;
    }
    .watermarkh {
      position: absolute;
      left: 704px;
      top: 320px;
      width: 100%;
      height: 100%;
    }
  }
  .pName{
    width: 150px;
    position: relative;
    top:385px;
    left: 277px;
    font-size: 20px;
    font-weight: 600;
  }
  .pName1{
    width: 150px;
    position: relative;
    top:341px;
    left: 277px;
    font-size: 20px;
    font-weight: 600;
  }
  .pName2{
    width: 300px;
    position: relative;
    top:430px;
    left: 277px;
    font-size: 20px;
    font-weight: 600;
  }
  .pName3{
    width: 190px;
    position: relative;
    top:310px;
    left: 303px;
    font-size: 20px;
    font-weight: 600;
  }
  .pName4{
    width: 500px;
    position: relative;
    top:-82px;
    left: 811px;
    font-size: 20px;
    font-weight: 600;
  }
  .pName5{
    width: 150px;
    position: relative;
    top:80px;
    left: 937px;
    font-size: 20px;
    font-weight: 600;
  }
  .pName6{
    width: 150px;
    position: relative;
    top:59px;
    left: 1035px;
    font-size: 20px;
    font-weight: 600;
  }
  .pName7{
    width: 150px;
    position: relative;
    top:38px;
    left: 1130px;
    font-size: 20px;
    font-weight: 600;
  }
  .pName8{
    width: 150px;
    position: relative;
    top:14px;
    left: 1238px;
    font-size: 20px;
    font-weight: 600;
  }
</style>
